<template>
  <div>
    <p >
      权限名称 <input type="text" placeholder="权限名称查询" v-model="one" />
    </p>
    <br /><br />
    <p style="position:absolute; right:50px;top:200px">
      <el-button icon="el-icon-search" type @click="chaxun">查询</el-button>
      <el-button type="danger" icon="el-icon-delete" text>重置</el-button>
    </p>
    <br />
    <div >
      <el-button type="radio" @click="dialogFormVisible = true"
        >+添加权限</el-button
      >
      <el-dialog
        @closed="ad"
        title="+添加权限"
        :visible.sync="dialogFormVisible"
      >
        <el-form>
          <el-form-item label="权限名称">
            <el-input v-model="two" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限">
            <el-input v-model="three" autocomplete="off"></el-input>
            <el-form-item label="接口URL">
              <el-input v-model="four" autocomplete="off"></el-input>
              <el-form-item label="说明">
                <el-input v-model="five" autocomplete="off"></el-input>
              </el-form-item>
            </el-form-item>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <br />

    <div>
      <el-table :data="newtableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border style="width: 100%">
        <el-table-column fixed prop="id" label="id" width="150">
        </el-table-column>
        <el-table-column prop="quanname" label="权限名称" width="120">
        </el-table-column>
        <el-table-column prop="quan" label="权限" width="200">
        </el-table-column>
        <el-table-column prop="port" label="接口URL" width="120">
        </el-table-column>
        <el-table-column prop="suoming" label="说明" width="300">
        </el-table-column>
        <el-table-column label="Action" width="100">
          <template >
             <el-button type="text" @click="dialogFormVisible = true"
        >编辑</el-button>

            <el-button type="text" size="small" @click="dele(index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <br />
    <div class="block" style="position: relative; left: 40%">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4]"
        :page-size='pagesize'
        layout="total,sizes, prev, pager, next, jumper"
        :total="newtableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize=val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val;
    },
    dele(idx) {
      this.newtableData.splice(idx, 1);
    },
    chaxun() {
      var y = this.one;
      this.newtableData = this.newtableData.filter(function (x) {
        return x.quanname == y;
      });
    },
    change(x) {
      this.newlist[x];
    },
    ad() {
      this.newtableData.push({
        id: "2021-06-08",
        quanname: this.two,
        quan: this.three,
        port: this.four,
        suoming: this.five,
      });
    },
    getPlayList() {
      //  console.dir(this.axios);
      //this.axios.get()
      //this.axios.post()

      this.axios.get("http://129.28.14.245:5000/banner").then((res) => {
        console.log(res);
        //this.cat=res.data.tags
        //this.tableData=res.data.banners
      });
    },
  },

  data() {
    return {
      wid: "100%",
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
     currentPage: 1,
      pagesize:2,
      newtableData: [
        {
          id: "2016-05-02",
          quanname: "王小虎",
          quan: "上海市普陀区金沙江路 1518 弄",
          port: "	上海市普陀区金沙江路 1518 弄",
          suoming: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2016-05-02",
          quanname: "王小龙",
          quan: "上海市普陀区金沙江路 1518 弄",
          port: "	上海市普陀区金沙江路 1518 弄",
          suoming: "上海市普陀区金沙江路 1518 弄",
        },
         {
          id: "2016-05-02",
          quanname: "王小龙",
          quan: "上海市普陀区金沙江路 1518 弄",
          port: "	上海市普陀区金沙江路 1518 弄",
          suoming: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
};
</script>

